Okay, so today we'll be the first of two lectures where we're going to be making the shop basically.
Okay, so last lecture we were doing all the set up for shop.
So we're all ready this lesson to start coding it really.
Okay.
So all this work will be done in the shop system, local script and majority of the work as well as
some other areas as well.
Okay.
So um, obviously organization of this script is quite important as there's a couple of different key
areas with this shop.
So how this will work is we obviously first need to display all of the items.
So first we need item displaying um to set up the viewport and stuff that as well.
Once I've done that we need the player to be able to click the item and all the item stats to appear
on the left hand side here.
Okay.
And we then need player to be able to purchase it the purchase to be successful.
It'll take away however much it costed and then the items will be in their inventory.
So quite a bit of code here to be looking at, but um, we'll get through it.
So to start off with we're going to make some variables.
I'm going to label things out quite nicely because there's lots of different areas involved in this
one system.
So I'm going to reference replicator storage.
Let me make it a bit larger.
Is equal to game get service.
Replicate storage.
Um.
And I'm going to reference an event.
I'm just going to put in now remote events here called um item purchased.
Basically, once they purchase the item, we will need to do some work on the server rather than on
the client, because we need to be able to give them the item on the server, because that's because
then they have everyone can see that one item basically.
Now we probably won't we won't be looking at it today.
It will be in the next lecture.
We'll look at product purchasing.
But I'm just I'm making all these variables to start off with.
So local item purchased is a good rib cage storage colon weight for child item purchased okay.
Let's reference the model script.
That's very important.
So local shop items is equal to require web storage.
Wait for child shop items.
Let's reference shop.
So local shop G is equal to script dot parent.
Um, local shop button, which is button to open up the shop.
Is equal to shop dot shop button.
And I was going to say local shop frame.
Is eager to shop.
Dot shop, Frank.
These are some common variables that we're going to be using, because opening and closing the frame
is going to be quite an important one as well.
I'm going to reference the items frame as well.
So local items frame.
Is going to be equal to shop frame.
The items um reference the template.
Local templates is equal to script dot templates.
Um.
Anything else?
Yeah.
Of course we're going to need to speed at some point aren't we.
So local player is equal to game dot players dot local player then get leaderstats.
So local leaderstats.
Is equal to player weight per child.
Leaderstats.
Then we can get the the speed value.
That's very important because we need to be we need to use that so we can see if one, if they can afford
the item and to take away how much the item cost.
So like with speed is equal to leaderstats dot speed.
And he's a main chunk of variables really that we're going to be using for this script.
I just want to make to write them all out first instead of going over and adding things in, because
we're going to be using most of them at the moment anyway.
Okay.
So the first bit, which is quite easy really, is to toggle visibility by clicking this button here.
So this one's quite simple.
Let's make a little summary.
Some summer heading here called Shop Visibility.
Okay, that's quite easy when the mouse button is clicked.
So on with the mouse button.
One click event.
We basically want to check to see if the frame is currently visible or not.
So shop button dot mouse button one.
Click connect function like this here.
And basically if if the frame is currently visible then make it invisible and it is currently invisible.
Make it visible because we want to not only be able to open it, but also to be able to close it as
well.
So if shop frame dot visible, so if it's visible then shop frame.
Shop frame.
Dot visible is equal to false.
Sorry.
And then else we know if visible is at the moment, at the moment false.
So we're going to then turn it to be true like that there.
Okay.
Let's just quickly check to see if this works.
So by playing the game.
And clicking on the shop.
Um, it's taking a while to load today.
Oh.
We have an internal server error with APIs.
Okay.
Interesting.
I don't think the API, I think the data stores are working today.
Maybe.
Mm.
But, um.
See here.
Click like quite nicely.
There appears and disappears like that there.
Perfect.
Okay.
Um, so on from there.
We then want to start displaying our products.
Okay.
And this is probably the larger chunk of code.
Really.
Okay.
So let's start it down here.
So this is um, displaying.
Shop products.
Okay.
Um, so, um, I'm going to do this by using a icon loop, which will basically fetch all of the items
here.
And for each one we're going to say, um, this is the viewport.
This is all this stuff basically.
But we're going to be using that.
That module is going to come in handy here basically.
So for I comma I could use V I'm going to use item.
Makes a bit more sense when you're reading it in pairs.
Um shop items dot items.
So we're referencing the shop items shop items model script and then the items bit underneath which
everything is inside of.
The reason why did this is because if you wanted to add in other things like pets and stuff like that,
you might want to make a different table for that.
Um, then just press do like.
That's fair.
We don't need to use get children because this is a table already.
Get children is just making a table.
We already got one of those.
Okay.
So for each of these we want to add in a well copy this template and put it into the frame here.
So we can use a clone function for that.
So local text button is equal to template colon clone.
Now the parent of this is going to be about frame.
So text button dot parent is equal to shop frame dot items dot frame.
Then you want to give it a name.
Now there's a couple of different things we could call it.
We could just leave them all as templates.
We could call them the name of the item that it's displaying.
Um, but through practice, I think the best thing to name it is just a number ticking up by one.
So this is the first item.
This is the second item.
This is the third item.
Because in the model script they're displayed first as numbers, not as a name.
We're not calling these Apple is equal to this.
These are numbers okay.
So it's almost better to use the numbers instead rather than using the the names.
And also these have spaces.
So they become a bit more difficult to reference and things like that.
So it is just a bit easier to be using.
So.
Dot name like this here is going to be equal to I but I the number we want this as a string.
So we're going to use the two string function that I've used once or twice before.
This converts eyes and number to a string.
So instead of it being one it's now one like this.
Here.
There we go.
Okay.
Now we're going to set up the viewport.
Viewport.
Set up.
Here.
Okay, so, um, how have you port frame works, is that it so-called renders a certain image.
So if you have a, um, like we have, we use one of the Red bull cans.
For example, if we made a render of that, you wouldn't be able to see anything else apart from that.
Red bull can, um, and we do this by duplicating the can, putting it inside of the viewport frame,
and positioning the camera in a certain way so it can see it.
Um.
So we are first going to add in a camera into this viewport, because we need a camera to find out where
this item is going to be.
So local viewport camera I'm going to call it is equal to instance dot new.
Camera.
I'm going to put this inside of the viewport frame which is in the template.
So that'll be text button.
Dot viewport frame.
Yeah.
Okay, cool.
Um, we then want to change the viewport frame has a property here called Current Camera.
We want to assign this to be our viewport camera.
This is the camera that it uses uses to render the image of our tool basically.
So um viewport frame we're referencing, although we could say, um, no, you would want to say yeah.
You would want to go um, text button dot viewport frame, dot current camera is then equal to the viewport
camera.
Okay.
We then want to add in our object.
So this is the lollipop or the drink or whatever item you're wanting to take a picture of.
And yeah, by the way I don't think I mentioned, but the reason why we're doing all this complicated
viewport stuff instead of just making images is because imagine if imagine if you had to make an image
of each item every single time you want to add it on.
It's it's difficult.
Um, we'd have to upload all these IDs, copy the IDs over, check the IDs to the item.
You just.
It's a bit more complicated, really.
And once we've done the final product, you will see that it's probably even better than doing that.
Really?
It does look really nice.
Once you've got it set up properly.
It is worth the extra bit of code really that we're writing.
So we're going to add in our viewport object.
Now this is going to be the tool from the items folder.
So this is equal to um.
Now this is where we can reference it quite easily because we have this I one which ticks up tick tick
each time.
Um, so it will be shop items, dot items and in square brackets I so the first item if I is equal to
one, the third item is I is equal to three.
We going reference the tool.
I'm going to clone that tool.
Because obviously we not only we not want to use the one tool, but it's fair because the second player
wants it.
There's no tool to use.
Then we're going to parent this.
So viewport object dot parent to the viewport frame.
So.
So, um.
Text button, dot viewport frame.
Okay.
Now, once we've done all this, we need to set up the camera.
Now, let's actually see at the moment, if we play the game, what kind of.
It's how it's looking like to start off with.
If it works without setting up the camera or if it's just a weird angle.
Yeah, doesn't quite work at the moment.
It's added in all our items.
Might need to delete one but add in all our items there.
But no, it hasn't quite worked because we haven't adjusted the camera tool, so we haven't given the
camera a position.
So we've got this camera.
We need to give the camera a position, um, relative to the item so that it can see it quite nicely.
Now this will take a bit of trial and error based on your end because, um.
Of how you've, like, laid out your items and stuff.
But, um, this line will vary a bit.
I'll explain.
What.
-- needs change in a minute, but, um, we're going to set the viewport camera.
This is where we're going to see frame actually, because cameras don't use position, they use C frame.
C frame is going to be equal to C frame dot new.
And then here we are going to use the um look at.
Uh, so, look, I'm using new.
Are we?
We're going to be using.
Dot look at.
Okay so Dot look at.
We have our at and we have our look at.
So we at is the position of the camera.
And we look at is the position of it's looking at.
So we it's going to be positions at the primary part of the viewport object.
So the primary part of our tools the handle plus a small vector value.
Um so we're going to write down here viewport object dot primary part dot position plus a vector three
dot new value of let's say um two on the z.
Is the one that I've experimented and found works out here.
But basically the thing you might have to change is, um.
Based on how your objects are rotated.
If you need to look, if you need to change it to be two along the X or two along the Z, or two along
the Y even.
Because if you do it too long, the Z and you found out actually it's looking it's looking at the back
of the object, you need to do minus two.
And if it's looking at the side of the object, you need to put in 2 or -2 on the left.
So it might take a bit of trial and error there.
Um, two I think is a good number.
I wouldn't change between -2 and 2 if if it's really large, don't pick ten, because when you go and
actually use these tools, they need to have a they need to be the correct size of player to be able
to hold, really.
So try not to change that number, but um, adjusting it between 2 and -2 might be needed a little bit.
Van look, it can be looking at the primary parts position.
So viewport object primary parts.
Dot position.
There we go.
Quite a long line there.
But with this line, let's then see what this will look like if it's all been set up correctly.
Viewports are a bit difficult to set up, but trust me, they are worth it.
So see all the items we've got here.
Okay, so they're all here quite nicely so we can see them.
And it just saves a lot of time really when taking a picture of each one really.
So they are a really good addition for you to make.
I'm actually going to change the color of the template to this top bar color as well.
Now that I just see that.
So copy.
Uh, paste.
And just to try one more time to see my look a bit nicer.
And.
Yeah, there we go.
Look, it looks a bit nicer there.
So.
Yeah, that's that's how we use viewport frames.
Really.
So they're really cool addition.
And um, especially with shops that they are very useful.
Really.
Um, so this is a set up set up for them.
You have the, um, viewport camera, you have the object, and you position the camera in a way so
that it can see the object.
Okay.
Um, we now need to want to display the product stats when they are clicked.
So for each of these items of each of these text buttons we're adding in, we want to run an event.
If it is, if it's clicked because we want to change what the what stats are shown based on if the item
is clicked or not.
So we're going to back down here.
Text button dot mouse button one click connect function like this.
Here we then going to reference our.
We're going to make a variable for the product based on what um what the text button is called.
Because if a text button is called is called one, it's going to be the first product here basically.
Um, so local product.
Is equal to shop items, dot items.
And we're going to, um.
Well, when we over here we use a to string.
We're going to go the opposite way and use a to number.
So in square brackets here we're going to use a to number which converts a string into a number.
The our text button dot name.
Okay.
So this is when we want to to change all of these values here basically.
Okay.
So the shop frame.items.info.
Um.
I'm going to copy that.
Actually, it'll probably be quite useful.
Um, dot name.
Label.
Dot text is equal to product instead of going shop items or items dot I.
You can just say product here dot tool, dot name.
Or we can just say here, say here dot name really like that.
Um that bit again.
Dot cost label dot text.
The cost is equal to the product dot cost.
So you can see here how quick we how quick we're updating all these values because of this model script
here.
So it's a very good idea of spending a bit of time writing out all of this.
Um dot speed label dot text is equal to product.
Oh here we need to use a two string, um, and concatenate it actually.
So because we don't just want the number displayed, we want it to say, um, this is also here and
for here as well.
Sorry, I forgot about that.
Um, we want to say this is the cost with a colon there and then display the number like cost is equal
to two like that.
There.
So so to concatenate this we're going to use two dots.
And then to use a two string for the products cost.
So not as simple but because it's a number I'm wanting to put this with a string.
It needs to be a string.
Here.
It's going to be, um, the speed.
Like about there dot dot to string product dot speed and then same thing dot cooldown label.
Dot text is equal to cooldown.
Two string.
Product cooldown.
Okay.
Perfect.
Um.
Let's have a look then at that.
Oh we've got the viewport as well to do as well here.
Let's set up the viewport as well.
Um, so now, because this viewport frame here is going to be used for each item, we usually need to
delete any items that are there already before we continue.
So we need to say items frame.
Dot info dot viewport frame and use the clear or children function so we can set up again.
Basically, and you should be able to copy this code really.
Um, if there are any issues doing that, I'll be able to see in a minute.
Um, is that possible to do?
Um.
Yes, but think a little bit.
A little bit differently.
We'll need to.
Um, the object here is product.
Tool.
Viewport cap the text button.
Not text button here, is it?
It's, um.
The viewport frame.
So it's, um.
Item stream.
Dot info.
Dot viewport frame count.
Cameras.
Viewport.
Camera.
Parent.
Nat do the same thing.
Here.
And then.
That should be fine like that.
Okay.
And then the final bit here I'm going to put down here or up here, sorry is about whether it's purchased
or not because we purchased button I don't want it to display.
I don't want it to be to display purchase.
If it's already purchased it's going to be like grayed out, if it's already been or if the item has
already been purchased.
So to do this, we need to check the player's backpack or their character if they contain an item of
the same name of this item that they're trying to buy.
Because we don't want the player to be able to buy the item twice.
Once they've got the item, it stays in their inventory.
So if player dot backpack colon find first child the product dot name like this um or player dot character
so dot character um colon find first child product name so if they're even if it's even even in those
sorry in either of those places then it's been purchased.
So items frame.
Dot info dot purchase button dot text label dot text is going to be equal to purchased.
Instead of purchase.
Um.
We want to change the color of it.
So I've got background color three.
It's like a grayish kind of color.
So I'm going to I've picked here 0.60.60.6 like that.
And then um we also going to make the button inactive.
The active is equal to false.
So.
So this means that they're no longer able to click it.
We want this to be so because we're not on this event.
So we don't want this event.
The events that causes you to purchase it to fire if they've already purchased it basically.
Else.
So if it's not there we want to repeat this, but to show that you can purchase it to change the color.
And we're going to use here dot from RGB, because I've got a specific color that we chose here.
And we want to make sure that it's the same color like that and obviously make this true here.
Now you might be thinking, why do we need to change this if it's already like it already?
Well, if they click one but they do don't they.
They do have it will change it to purchased when they click another one we need to change it back to
purchase.
And there we go.
So that should be it.
For this first part let's play the game and see how this works.
Um, yeah.
Just see how this works.
So if we load into the game.
All our items have played nicely there.
Now it currently says item name like this to start with.
So we will have a look at this next lesson how to change that.
But when we click on an item it displays it quite nicely there.
The viewport isn't displaying though, but see all their stats and stuff are displaying very small the
it is displaying, but in a very very small.
Okay, let me see how we can adjust this then.
First off, I want the viewport frame here to be transparency of one.
So.
Viewport frame.
Like that there.
Um, what might be going on here?
Viewport object.
Clown.
Parents items.
Frame the viewport part position plus a vector value of two main part dot position.
Let's try that again.
Maybe one more time.
I'm not too sure what the issue was there.
Um.
Mm.
Viewports always are a little bit tricky I think myself.
Yeah.
So it's it's there.
But it's incredibly small.
Let's see what's going on.
Let's go into players.
Player guy.
Shop guy.
Shop frame.
Um items info viewport frame.
So we've got our camera.
And I've got a speed potion, so that's no issue.
Um.
The camera.
Current camera is this one.
Uh, we didn't set the current camera.
That's the issue.
I forgot about that one.
Current camera or we have though.
Text.
Text button.
No, not a text button, is it?
It's the, um, upper viewport frame.
Items frame.
Dot info dot viewport frame.
So it's for one here not over here is the issue there.
And I believe with that this all should be working.
Is it a simple mistake really made with copy and pasting that?
And here we go.
We've got all the items is playing quite nicely there.
Cool.
So you can see how this is quite cool really.
And I like how this is how this is ended up really.
Um, so we're going to leave it there for this lecture because obviously we can't make this shop in
one lecture.
It's quite a big code, big, big bit of code, but I've got a good amount of it done now.
And in the next lecture we're going to focus on how to how to fix this issue with displaying the stats.
And also of course, how how to allow the player to be able to purchase an item.
So, um, I'll see you in the next lecture when we're going to finish off with this, with this shop
script.